<template>
  <view v-if="shenheStatus == 0" class="bind_box">
    <view class="binded" v-show="binded">
      <image
        :src="asyncImgs.bind_phone.bg"
        mode="widthFix"
        style="width: 50%; margin: 0 auto"
      ></image>
      <view style="margin: 40rpx 0">
        <view class="">{{ $t('person.phone') }}</view>
        <view class="">{{ bindPhone }}</view>
      </view>
      <view class="bind_btn" @click="binded = false">{{
        $t('person.change')
      }}</view>
    </view>
    <view style="width: 100%; background-color: #fff; margin-bottom: 20rpx"
      ><view class="top_sm">{{ $t('person.authorization') }}</view></view
    >
    <view class="t_box">
      <view class="text_box">{{ $t('person.getPhone') }}</view>
      <view
        ><button
          type="primary"
          class="buttn"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          {{ $t('person.authorization') }}
        </button></view
      >
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: {
    Shenhe,
  },
  data() {
    return {
      binded: false,
      bindPhone: '',
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.bindPhone'),
    });
  },
  onShow() {
    if (uni.getStorageSync('userInfo').binding) {
      this.binded = true;
      this.bindPhone = uni.getStorageSync('userInfo').binding;
    }
  },
  methods: {
    getPhoneNumber(res) {
      uni.login({
        provider: 'weixin',
        success: async loginRes => {
          if (res.detail.iv) {
            const params = {
              ...res.detail,
              _platform: 'wx',
              code: loginRes.code,
            };
            const result = await this.$allrequest.user.user_binding(params);
            if (result.code == 0) {
              this.binded = true;
              this.bindPhone = result.data.dataObj;
              let userInfo = uni.getStorageSync('userInfo');
              userInfo.binding = result.data.dataObj;
              uni.setStorageSync('userInfo', this.userInfo);
            }
            this.$utils.toast(result.msg);
          } else {
            this.$utils.toast(this.$t('login.fail'));
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.bind_btn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #fff;
  font-size: 26rpx;
  background-color: rgb(255, 69, 68);
  border-radius: 40rpx;
  margin: 0 auto;
}
.binded {
  padding-top: 40rpx;
  height: 100hv;
  z-index: 999;
  background-color: rgb(242, 242, 242);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
}
.t_box {
  background-color: #fff;
  display: flex;
  height: 90rpx;
  line-height: 80rpx;
  justify-content: space-between;
  padding: 10rpx 40rpx;
  .text_box {
    width: 60%;
    background-color: rgb(242, 242, 242);
    color: rgb(195, 195, 195);
    border-radius: 5rpx;
    padding: 0 20rpx;
  }
  .buttn {
    height: 70rpx;
    line-height: 70rpx;
    font-size: 24rpx;
    background-color: #fff;
    color: rgb(255, 69, 68);
  }
}

.top_sm {
  margin-left: 100rpx;
  line-height: 100rpx;
  width: 120rpx;
  text-align: center;
  color: rgb(255, 69, 68);
  border-bottom: 2px solid rgb(255, 69, 68);
}
.bind_box {
  background-color: rgb(242, 242, 242);
  min-height: 100vh;
}
</style>
